<!Doctype html>
<html>
<head>
<link rel='stylesheet' href='css/bootstrap.css' type='text/css' />
<link rel='stylesheet' href='css/bootstrap-responsive.css' type='text/css' />
<link rel='stylesheet' href='css/font-awesome.css' type='text/css' />
<script src='js/jquery.js'></script>
<style>
@font-face{
font-family:'TechDeira';
src: url('font/facebook.otf');
}
#logo{
font-family:TechDeira;
color: #3B5998;
}
</style>
<script>
	$(document).ready(function(){
		$('#content').focus(function(){	
		$('#content').animate({width:'400px',height:'100px'});
		});
	});
</script>
<script>
$(function(){
$('input[type="submit"]').attr('disabled','disabled');
	$('input[type="text"]').keyup(function(){
		if($(this).val !=''){
		$('input[type="submit"]').removeAttr('disabled');
		}
	});
});
</script>
<script>
$(function(){
	$('#flash').hide();
$('#update_button').click(function(){
	var boxval=$('#content').val();

	dataString='content='+boxval;
	$('#flash').show();
	$('#flash').fadeIn(400).html('<img src="loading.gif" align="absmiddle"><span class="text-info">Loading Comment...</span>');
	$.ajax({
		type: "POST",
		url: "../controller/updateStatus.php",
		data: dataString,
		cache: false,
		success: function(html){
		$('ol#update').prepend(html);
		$('ol#update li:first').slideDown("slow");
		document.getElementById('content').value='';
		document.getElementById('content').focus();
		$("#flash").hide();
		$('input[type="submit"]').attr('disabled','disabled');
		$('#content').animate({width:'270px',height:'20px'});
	}

	});
	return false;
});
});

</script>
</head>

<body>
	<div class='container'>
	<h1 id='logo'>facebook</h1>
	<div class='well'>
		<form>
			<label>Say Something...</label>
			<input type='text' id='content' class='input-xlarge' />
			<br/><input type='submit' id='update_button' value='Update' class='btn btn-primary'/>
		</form>
	</div>
	<div id='flash'></div>
	<ol id='update'>
	
	</ol>
	</div>


</body>